<template>
  <div class="main-con">
    <el-form :inline="true" :model="query">
        <el-form-item label="发布时间">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
          />
        </el-form-item>
        <el-form-item label="动态类型">
          <el-select
            v-model="query.fileType"
            placeholder="请选择"
            style="width: 100px;"
          >
            <el-option label="图文" :value="1"/>
            <el-option label="视频" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="发布状态">
          <el-select
            v-model="query.publishStatus"
            placeholder="请选择"
            style="width: 110px;"
          >
            <el-option label="未审核" :value="0"/>
            <el-option label="审核失败" :value="2"/>
            <el-option label="已发布" :value="1"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="search">查询</el-button>
          <el-button plain @click="reset">重置</el-button>
          <el-button
            type="primary"
            plain
            @click="() => {handleDynamic()}"
          >发布动态</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        :data="tableData.list || []"
        border
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
        tooltip-effect="dark"
        style="width: 100%"
        class="dataTable"
      >
        <el-table-column prop="remark" label="动态文案">
          <template #default="scope">
            <div class="text-overflow">
                {{scope.row.remark}}
            </div>
        </template>
        </el-table-column>
        <el-table-column prop="fileType" label="动态类型" width="120">
          <template #default="scope">
            <span v-if="scope.row.fileType == 1">图文</span>
            <span v-if="scope.row.fileType == 2">视频</span>
          </template>
        </el-table-column>
        <el-table-column prop="publishStatus" label="发布状态" width="120">
          <template #default="scope">
            <span v-if="scope.row.publishStatus == 0">未审核</span>
            <span v-if="scope.row.publishStatus == 1">已发布</span>
            <span v-if="scope.row.publishStatus == 2">审核失败</span>
          </template>
        </el-table-column>
        <el-table-column prop="productCount" label="关联商品数" width="130"/>
        <el-table-column prop="likeCount" label="点赞数" width="120"/>
        <el-table-column prop="commentCount" label="评论数" width="120"/>
        <el-table-column prop="browseCount" label="浏览数" width="120"/>
        <el-table-column prop="publishTime" label="发布时间" width="170"/>
        <el-table-column label="操作" show-overflow-tooltip width="170">
          <template #default="scope">
            <el-button type="primary" link @click="handleTableItem(scope.row)">详情</el-button>
            <el-popconfirm
              title="确认删除？"
              @confirm="del(scope.row)"
            >
              <template #reference>
                <el-button type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
            <el-button type="primary" link @click="handleDynamic(scope.row)" v-if="!scope.row.publishStatus">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="query.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="tableData.total"
        style="margin: 20px 0 0 0;"
        @size-change="val => {handlePageChange(val, 'pageSize')}"
        @current-change="val => {handlePageChange(val, 'page')}"
      />
      <DynamicComp ref="dialogRef" @reload="search"/>
      <DynamicInfo ref="infoRef"/>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  defineComponent,
  onBeforeMount} from "vue";
import DynamicComp from "./dynamicComp.vue";
import DynamicInfo from "./dynamicInfo.vue";
import {
  contentQuery,
  contentDelete
} from '@/api/content';
import moment from 'moment';

defineComponent({
  name: 'dynamicComp'
})

const dialogRef = ref(null);
const infoRef = ref(null)
const  defaultQuery = {
  fileType: "",
  publishStatus: "",
  publishStartTime: '',
  publishEndTime: '',
  page: 1,
  pageSize: 10,
}
const query = ref(
  {...defaultQuery}
)
const date = ref('')
const loading = ref(false);
const tableData = reactive({
  total: 0,
  list: []
})

onBeforeMount(() => {
  search();
})

const search = async() => {
  loading.value = true;
  if(date.value&&date.value[0]) {
    query.value.publishStartTime = moment(date.value[0]).format("YYYY-MM-DD HH:mm:ss");
    query.value.publishEndTime = moment(date.value[1]).format("YYYY-MM-DD HH:mm:ss");
  }
  const {code, data} = await contentQuery(query.value);
  if(code==='') {
    Object.assign(tableData, data);
  }
  loading.value = false;
}

function reset() {
  date.value = '';
  query.value = {...defaultQuery};
  search();
}

function handlePageChange(val, type) {
  query.value[type] = val;
  search();
}

function handleDynamic(row={}) {
  dialogRef.value.open(row);
}

function handleTableItem(row) {
  infoRef.value.getInfo(row);
}

const del = async(row) => {
  const {code} = await contentDelete({recommendId: row.recommendId});
  if(code==='') {
    reset();
    ElMessage({
      message: '删除成功',
      type: 'success',
    });
  }
}

</script>

<style scoped lang="scss">
.main-con {
  padding: 20px;
  margin-top: 20px;
  background: #FFFFFF;
  .text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
